<template>
    <div>
        <template v-for="item in subMenus">
            <el-submenu :index="item.name" :key="`menu-${item.name}`" v-if="!item.meta.hideInMenu">
                <template slot="title">
                    <i :class="item.meta.icon"></i>
                    <span>{{item.meta.title}}</span>
                </template>

                <template v-for="child in item.children" v-if="!child.meta.hideInMenu">
                    <router-link :to="item.path+'/'+child.path" :key="item.path+'/'+child.path">
                        <el-menu-item :index="item.path+'/'+child.path" :key="`menu-sub-${child.name}`" v-if="!child.children && !child.meta.hideInMenu">
                            <i :class="child.meta.icon"></i>
                            <span slot="title">{{child.meta.title}}</span>
                        </el-menu-item>
                    </router-link>
                </template>

            </el-submenu>

        </template>
    </div>
</template>

<script>
export default {
    name: "SidebarMenuSubItem",
    props: {
        subMenus: {
            type: Array,
            default() {
                return [];
            }
        }
    }
};
</script>

<style scoped>
</style>